<extend name="Base:main" />
<block name="content">
	<script src="__PUBLIC__/seller/js/jquery.imagezoom.min.js"></script>
	<style>
		.show_info_top{ width:100%; float:left;}
		.info_thumb_list{ width:350px;  float:left;}
		.info_thumb_list dl dt,.info_thumb_list dl dd{ float:left; margin:0px; padding:0px;}
		.info_thumb_list dl dt{ width:350px; height:350px;border:1px solid #ccc; margin-bottom:10px;}
		.clearn{ clear:both; }
		.info_thumb_list dl dd{ width:77px; height:77px; border:1px solid #ccc; margin-right:10px;}
		.info_thumb_list dl dd:last-child{ margin-right:0px;}
		.info_thumb_list dl dd:first-of-type{ margin-left:6px;}
		.info_price_info{ width:50%;float:left; margin-left:30px;}
		.info_info_data{ width:100%;background:#f7f7f7}
		.info_info_data1{ width:94% !important; padding:20px 3% !important; }
		.info_info_data1 dl{ width:50%;}
		.info_info_data1 dl,.info_info_data1 dl dt,.info_info_data1 dl dd{float:left; margin:0px; height:30px; font-size:14px; line-height:30px;}
		.info_info_data1 dl dd{ font-size:18px; vertical-align:middle}
		.info_info_data1 dl dd span{ font-size:12px;}
		.info_info_data1 dl dt{ width:25%;}
		.info_info_data1 dl dd{ width:75%;}
		.info_price_info input{ padding:5px 12px; border:1px solid #ccc;}
		.goods_attr_1{ width:100%; padding:10px 0px;}
		.goods_attr_1 dl{ width:50%;}
		.goods_attr_1 dl,.goods_attr_1 dl dt,.goods_attr_1 dl dd{float:left; font-size:14px; margin:0px;}
		.goods_attr_1 dl dt,.goods_attr_1 dl dd{ height:30px; line-height:30px;}
		.info_price_info button{ padding:10px 35px; font-size:18px; border:none;color:#fff}
		.goods_details{ width:100%; margin-top:50px; float:left;}
		.menu_itlt{ width:100%; border-bottom:3px solid #ccc; height:45px; line-height:45px; text-indent:1em}
		.goods_contents{ width:100%; line-height:180%; font-size:14px; margin:15px 0px 50px 0px;}
		.supply_lists{ width:100%;}
		.supply_lists dl{ width:100%; float:left; border-bottom:1px dashed #ccc; margin:0px;}
		.supply_lists dl:last-of-type{ border-bottom:none }
		.supply_lists dl dt{ width:100%; line-height:180%; }
		.supply_lists dl dd{ width:49%; line-height:180%;}
		.supply_lists dl dt,.supply_lists dl dd{ float:left;}
		.supply_lists table{ width:100%; margin-bottom:10px;}
		dt+dd { margin:0px; padding:0px; }
		.supply_page{ width:100%; margin-top:10px; text-align:center;}
		.supply_page a{ padding: 2px 9px; display:inline-block; }
		.supply_page a.active{ background:#0e90d2; color:#fff; }
		.am-dropdown-content{ width:500px;}
		.info_thumb_list dd:hover{ border:1px solid #099fb8; cursor:pointer}
		.box{width:610px;}
		.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
		.tb-pic a img{vertical-align:middle;}
		.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
		.tb-thumb{margin:10px 0 0;overflow:hidden;}
		.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
		.tb-s310, .tb-s310 a{height:310px;width:310px;}
		.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
		.tb-s310 a{*font-size:271px;}
		.tb-s40 a{*font-size:35px;}
		.tb-s40, .tb-s40 a{height:40px;width:40px;}
		.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
		.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:44px;padding:2px;}
		.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
		.tb-thumb li div{border:1px solid #CDCDCD;}
		div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
		div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
	</style>
    <div class="tpl-content-wrapper">
            <div class="tpl-content-page-title">
                商品详情
            </div>
            <ol class="am-breadcrumb">
                <li><a href="#" class="am-icon-home">首页</a></li>
                <li><a href="#">商品管理</a></li>
                <li class="am-active">商品详情</li>
            </ol>
            <div class="tpl-portlet-components">
                <div class="portlet-title">
                      <div class="caption font-green bold">
                        <span class="am-icon-code"></span>详情
                    </div>
                </div>
                <div class="tpl-block ">
                    <div class="show_info_top">
                        <div class="info_thumb_list">
							<div class="box">
								<div class="tb-booth tb-pic tb-s310">
									<empty name="goods.pic_list">
									<a href="__PUBLIC__/seller/img/noimg.jpg"><img src="__PUBLIC__/seller/img/noimg.jpg" rel="__PUBLIC__/seller/img/noimg.jpg" class="jqzoom" /></a>
									<else />
									<?php $image_info = strpos( $vo , 'http://') != -1 ? "http://".$goods['pic_list'][0] : $goods['pic_list'][0]; ?>
									<a href="{$image_info}"><img src="{$image_info}" alt="" rel="{$image_info}" class="jqzoom" /></a>
									</empty>
								</div>
								<ul class="tb-thumb" id="thumblist">
									<foreach name="goods.pic_list" item="vo" key="key">
									<?php $vo = strpos( $vo , 'http://') != -1 ? "http://".$vo : $vo; ?>
									<eq name="key" value="0">
									<li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="{$vo}" mid="{$vo}" big="{$vo}" width="40"></a></div></li>
									<else />
									<li><div class="tb-pic tb-s40"><a href="#"><img  src="{$vo}" mid="{$vo}" big="{$vo}" width="40"></a></div></li>
									</eq>
									</foreach>
								</ul>
							</div>
                        </div>
						<script type="text/javascript">
						$(document).ready(function(){
							$(".jqzoom").imagezoom();
							$("#thumblist li a").click(function(){
								$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
								$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
								$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
							});
						});

						</script>


                        <div class="info_price_info">
                        	<p style=" margin:0px; padding:0px; font-size:18px; padding-bottom:10px;  font-weight:bold;">{$goods.name}</p>
                            <p style=" margin:0px; padding:0px; font-size:13px; color:#A8A8A8; padding-bottom:8px;">分类：{$goods.type_name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;en13编码：{$goods.earn13}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品创建时间：<eq name="goods.create_time" value="0">不明<else/>{:date('Y-m-d' , $goods['create_time'])}</eq></p>
                            <notempty name="attr_list">
                            <div class="info_info_data">
                            	<div class="goods_attr_1 info_info_data1">
                                    <volist name="attr_list" id="vo">
                                    <dl>
                                        <dt>{$vo.name}：</dt>
                                        <dd>{$vo.data}</dd>
                                    </dl>
                                    </volist>
                        			<div class="clearn"></div>
                                </div>
                            </div>
                            </notempty>
                            <p style=" margin:0px; padding:0px; font-size:13px;padding-buttom:10px;">计量单位：{$goods.pom}</p>
                            <p style=" margin:0px; padding:0px; font-size:13px;padding:10px 0px;">在途库存： {$stock_num_send} {$goods.pom}</p>
                            <p style=" margin:0px; padding:0px; font-size:13px;padding:0px;">在库库存： {$stock_num} {$goods.pom}</p>
                            <p style=" margin:0px; padding:0px; font-size:13px;padding-top:10px;">购买数量： <input type="text" size="10" value="0"/></p>
                            <p style=" margin:0px; padding:0px; font-size:13px;padding:20px 0px 10px 0px;">
							
								<empty name="stock_num">
								<button style="background:#36c6d3"><a href="javascript:alert('功能正在开发，敬请期待');" style="color:#fff;">预购</a></button>
								<else />
                                <button style="background:#099fb8"><a href="{:U('Goods/addOrder' , array('goods_id' => $goods['id']))}" style="color:#fff;">我要购买</a></button>
								</empty>
                                <eq name="goods.is_distribution" value="1">
                            	<button style="background:rgb(124,188,24);" href="{:U('Goods/productDistribution' , array('id' => $goods['id']))}" title="产品分销" width="650" height="500" menu="load_iframe_url" >一件分销</button>
                                <else />
                                <button>已分销</button>
                                </eq>
                            	<button onclick="location.href='{:U('Goods/supplyCommodity',array('id' => $goods['id']))}'" style="background:rgb(235,69,61);">我要供应</button>
                            </p>
                            <div style=" margin:0px; padding:0px; font-size:13px;padding:20px 0px 10px 0px;">供应信息
							<div class="am-dropdown" data-am-dropdown="{ justify: '#doc-dropdown-justify' }">
                                <a class="am-dropdown-toggle" data-type="close" data-id="{$goods.id}" id="supply_show_list" style="font-size:20px; font-weight:bold; color:red">【{$goods.supply_total}】</a>
                                <div class="am-dropdown-content">
                                    <div class="supply_lists">
                                        <span></span>
                                        <div style="clear:both"></div>
                                    </div>
                                    <gt name="goods.supply_total" value="3">
                                    <?php
                                        $page_num = ceil( $goods['supply_total'] / 3 );
                                    ?>
                                    <div class="supply_page" style="display:none;">
                                    <?php for($i=1;$i<=$page_num;$i++ ) :?>
                                        <a href="javascript:;" data-val="{$i}"  <?php echo $i == 1 ? 'class="active"' : ''; ?>>{$i}</a>
                                    <?php endfor; ?>
                                    </div>
                                    </gt>
                                </div>
                            </div>
                            条，共有<span style="font-size:20px; font-weight:bold; color:red">【{$goods.distribution_total}】</span>家分销此产品</div>
                        </div>
                        <div class="clearn"></div>
                    </div>
                    <div class="goods_details">
                    	<div class="menu_itlt"> 商品详情 </div>
                        <div class="goods_contents">{:stripslashes(htmlspecialchars_decode($goods['info_pc']))}</div>
                    </div>
				</div>
			</div>

		</div>

        </div>
        <script id="supply_list_tempate">
		{{#  $.each(d.data, function(index, item){ }}
			<dl>
				<dt>
				{{ item.shop_name }}
				{{# if( item.stock_status == 1 ) { }}
				<a href="javascript:;" style=" margin-left:5px; width:15px; height:15px; background:url(__PUBLIC__/seller/img/ku.jpg); display:inline-block;vertical-align: middle;"></a>
				{{# } else { }}
				<a href="javascript:;" style=" margin-left:5px; width:15px; height:15px; background:url(__PUBLIC__/seller/img/tu.jpg); display:inline-block;vertical-align: middle;"></a>
				{{# } }}
				</dt>
				<dd style="width:70%;">
					<table>
						<tr>
							<td>代发价：￥{{ item.acting_price }}</td>
							<td>批发价：￥{{ item.wholesale_price }}</td>
						</tr>
						<tr>
							<td>锁库价：￥{{ item.lock_price }}</td>
							<td>库　存：{{ item.stock_num }}</td>
						</tr>
					</table>
				</dd>
				<dd style="width:30%; text-align:right">{{# if( item.is_buy == 1 ) { }}<a class="am-btn am-btn-default am-btn-xs">已锁库</a>{{# }else { }}<a href="{{ item.url }}" class="am-btn am-btn-primary am-btn-xs" title="产品分销锁库" width="700" height="600" menu="load_iframe_url">我要锁库</a>{{# } }}</dd>
			</dl>
		{{# }); }}
		</script>
        <script>
			$(function(){
				$('.info_thumb_list dl dt').html('<img src="'+$('.info_thumb_list dl dd').eq(0).find('img').attr('src')+'" width="348" height="348" />')
			});
			$(document).on('click' , 'div.supply_page a',function(){
				var _self = $(this).closest( '.am-dropdown' );
				$(this).parent().find('a.active').removeClass( 'active' );
				$(this).addClass( 'active' );
				_self.find('.supply_lists').html( data_load_template );
				$.get("{:U('Goods/goodsSupplyList')}" , { goods_id : _self.find('#supply_show_list').attr('data-id') , p : $(this).attr('data-val') } , function( data ){
					if( data.status == 1 ) {
						laytpl($('#supply_list_tempate').html() ).render(data , function(html){
							_self.find('.supply_lists').html( html );
							_self.find('.supply_page').show();
						});
					} else {
						_self.find('.supply_lists').html( not_message_template );
					}
				},'json');
			});
			$('a#supply_show_list').click(function(){
				var data_type = $(this).attr('data-type') == 'close' ? 'open' : 'close';
				var data_id = $(this).attr('data-id');
				var _self = $(this).parent();
				$(this).attr( 'data-type' , data_type );
				if( data_type == 'open' ) {
					_self.find('.supply_lists').html( data_load_template );
					$.get("{:U('Goods/goodsSupplyList')}" , { goods_id : data_id} , function( data ){
						if( data.status == 1 ) {
							laytpl($('#supply_list_tempate').html() ).render(data , function(html){
								_self.find('.supply_lists').html( html );
								_self.find('.supply_page').show();
							});
						} else {
							_self.find('.supply_lists').html( not_message_template );
						}
					},'json');
				} else {
					_self.find('a.active').removeClass( 'active' );
					_self.find('.supply_page a').eq(0).addClass( 'active' );
				}
			});
			$('.info_thumb_list dd img').click(function(){
				$('.info_thumb_list dl dt img').attr('src' , $(this).attr('src'));
			});
		</script>
</block>